<div class="content" layout-padding>
    <h1>
        添加部门
    </h1>

    <form name="departmentForm">
        <md-input-container class="md-block">
            <label>部门名称</label>
            <input md-maxlength="20" minlength="2" required name="Department" ng-model="Department.Name">
            <div class="hint" ng-if="showHints">部门名称</div>
            <div ng-messages="departmentForm.Department.$error">
                <div ng-message="required">请填写部门名称</div>
                <div ng-message="md-maxlength">部门名称不能超过20</div>
                <div ng-message="minlength">部门名称不能小于2</div>
            </div>
        </md-input-container>


        <md-input-container class="md-block">
            <label>部门描述</label>
            <textarea md-maxlength="100" minlength="2" rows="5" required name="Description"
                      ng-model="Department.Description"></textarea>
            <div class="hint" ng-if="showHints">部门描述</div>
            <div ng-messages="departmentForm.Description.$error">
                <div ng-message="required">请填写部门描述</div>
                <div ng-message="md-maxlength">部门描述不能超过50</div>
                <div ng-message="minlength">部门描述不能小于2</div>
            </div>
        </md-input-container>

        <md-button ng-disabled="loadding||departmentForm.$invalid" class="md-raised" ng-click="addDepartment()">
            <div layout="row" layout-align="center center">
                <div flex="30" ng-show="loadding">
                    <md-progress-circular class="md-accent" md-mode="indeterminate"
                                          md-diameter="40"></md-progress-circular>
                </div>
                <span flex>添加</span>
            </div>
        </md-button>
    </form>

</div>